<template>
  <view class="index" v-if="!isLoading">
    <view class="container bg-color">
      <view class="index-search" @tap="goToSearch">
        <text class="iconfont icon-sousuokuang"></text>
        <input
          type="text"
          :placeholder="searchWord"
          @focus="getInput"
          @blur="leaveInput"
        />
      </view>
      <scroll-view scroll-y="true">
        <!-- 轮播数据 -->
        <view class="swiper-box">
          <swiper
            class="swiper"
            circular="true"
            indicator-dots="true"
            autoplay="true"
            interval="3000"
            duration="500"
            :indicator-active-color="activeDot"
          >
            <swiper-item v-for="(banner, index) in bannerList" :key="index">
              <image :src="banner.pic" />
              <!-- <my-image :imgpath="banner.pic"></my-image> -->
            </swiper-item>
          </swiper>
        </view>

        <!-- 金刚区 -->
        <view class="recommend-option">
          <view
            v-for="(item, index) in listOptions"
            :key="index"
            @tap="entryHomePage(item.url)"
          >
            <!-- <image :src="item.iconUrl" mode="" /> -->
            <view class="iconfont" :class="item.icon"></view>
            <text>{{ item.name }}</text>
          </view>
        </view>

        <!-- 推荐歌单 -->
        <view class="recommend-song">
          <view class="recommend-song-head">
            <view>|&nbsp;</view>
            <view>推荐歌单</view>
          </view>

          <!-- <view class="recommend-song-list"> -->
          <scroll-view
            class="recommend-song-list"
            scroll-x="true"
            show-scrollbar="false"
          >
            <view
              class="recommend-song-item"
              v-for="(item, index) in recommendList"
              :key="index"
              @tap="goToDetail(item.id)"
            >
              <view class="text iconfont icon-xiangshang">{{
                item.playCount | formatCount
              }}</view>
              <view class="recommend-song-item-img"
                ><image :src="item.picUrl" mode=""
              /></view>
              <view class="recommend-song-item-text">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
        <!-- </view> -->
        <view class="hot">
          <view class="hot-title">
            <view>|</view>
            <view> &nbsp;&nbsp;热门歌单</view>
            <view @tap="goToMoreRank">查看更多&nbsp;&gt;</view>
          </view>
          <view class="index-list">
            <view
              class="index-list-item"
              v-for="(item, index) in topsList"
              :key="index"
              @tap="goToList(item.id)"
            >
              <view class="index-list-img">
                <image :src="item.coverImgUrl" mode="" />
                <text>{{ item.updateFrequency }}</text>
              </view>
              <view class="index-list-text">
                <view v-for="(mItem, index) in item.tracks" :key="index"
                  >{{ index + 1 }}.{{ mItem.first }}-{{ mItem.second }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  getBanner,
  getHotDetailList,
  getTopList,
  recommendSongSheet,
} from "@/api/index.js";
export default {
  data() {
    return {
      //指示点颜色
      activeDot: "rgb(255,255,255,.7)",
      bannerList: [],
      listOptions: [
        {
          icon: "icon-love",
          name: "每日推荐",
          url: "everyRecommend",
        },
        {
          icon: "icon-rementuijian",
          name: "推荐歌单",
          url: "",
        },
        {
          icon: "icon-paihangbang",
          name: "排行榜",
          url: "",
        },
        {
          icon: "icon-maikefeng_bg",
          name: "热门歌手",
          url: "",
        },
      ],
      timer: null,
      hotList: [],
      pageHomeList: [],
      topsList: [],
      index: 0,
      maxIndex: 0,
      searchWord: "搜索歌曲",
      isLoading: true,
      recommendList: [],
    };
  },

  components: {},

  onLoad() {
    this.getBannerList();
    this.getHotDetail();
    this.autoShowHotWord();
    this.topList();
    this.getRecommendList();
    this.isLoading = false;
    this.$store.dispatch("User/userProfile", uni.getStorageSync("userId"));
  },

  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

  methods: {
    goToMoreRank() {
      uni.navigateTo({
        url: `/pages/moreRank/index`,
      });
    },
    //自动播放热点词
    autoShowHotWord() {
      setTimeout(() => {
        if (this.timer) {
        } else {
          this.timer = setInterval(() => {
            if (this.index >= this.maxIndex) {
              this.index = 0;
            } else {
              this.index += 1;
            }
          }, 3000);
        }
      }, 1000);
    },
    // 当输入框获取到焦点取消掉热点词
    getInput() {
      clearInterval(this.timer);
      this.timer = null;
    },
    leaveInput() {
      this.autoShowHotWord();
    },
    async getBannerList() {
      try {
        let list = await getBanner();
        this.bannerList = list.banners || [];
      } catch (error) {}
    },

    async getHotDetail() {
      try {
        let data = await getHotDetailList();
        this.hotList = data.data || [];
        this.maxIndex = data.data.length;
      } catch (error) {}
    },

    async topList() {
      try {
        let result = await getTopList();
        result.list.length = 4;
        this.topsList = result.list;
      } catch (error) {}
    },

    // 点击金刚区进行路由跳转
    entryHomePage(url) {
      if (url) {
        uni.navigateTo({
          url: "/pages/everyRecommend/index",
        });
      }
    },

    // 热门歌单跳转
    goToList(id) {
      uni.navigateTo({
        url: `/pages/list/index?id=${id}`,
      });
    },

    goToSearch() {
      uni.navigateTo({
        url: `/pages/search/index`,
      });
    },

    // 获取热门推荐
    async getRecommendList() {
      try {
        let data = await recommendSongSheet();
        console.log("热门推荐数据", data);
        this.recommendList = data.result;
      } catch (error) {}
    },

    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/songSheet/index?id=${id}`,
      });
    },
  },

  computed: {},

  watch: {
    index: {
      handler(newValue, oldValue) {
        if (newValue != this.maxIndex) {
          this.index = newValue;
          this.searchWord = this.hotList[newValue].searchWord;
        } else {
          this.index = 0;
        }
      },
    },
  },
};
</script>

<style lang="less">
page {
  width: 100%;
  height: 100%;
}
.bg-color {
  background-color: #ffffff;
}
/* #ifdef H5*/
.container {
  width: 100%;
  height: calc(100vh - 270rpx);
  padding-bottom: calc(var(--window-bottom) + 20rpx);
  background-color: #ffffff;
  overflow: hidden;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.container {
  width: 100%;
  height: calc(100vh);
  padding-bottom: calc(var(--window-bottom) + 20rpx);
  background-color: #ffffff;
  overflow: hidden;
}

.container scroll-view {
  height: 93%;
}
/* #endif */
.index-search {
  display: flex;
  background: #eeeeee;
  height: 73rpx;
  margin: 30rpx 30rpx 30rpx;
  border-radius: 50rpx;
  align-items: center;
}
.index-search text {
  margin: 0 27rpx;
  font-size: 42rpx;
}
.index-search input {
  font-size: 30rpx;
  // color: #eeeeee;
  flex: 1;
}

.swiper-box {
  swiper {
    display: flex;
    flex: 1;
    border-radius: 26rpx;
    margin: 0rpx 30rpx;
    overflow: hidden;
    swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
        border-radius: 26rpx;
        overflow: hidden;
      }
    }
  }
}

.recommend-option {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  height: 180rpx;
  margin: 20rpx 0rpx 0rpx 0rpx;
  border-bottom: 10rpx solid #f5f5f8;
  view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // image {
    //   width: 80rpx;
    //   height: 80rpx;
    //   // background-color: red;
    //   overflow: hidden;
    // }
    view {
      color: rgb(230, 63, 63);
      margin-bottom: 20rpx;
      font-size: 80rpx;
    }
    text {
      color: #000000;
    }
  }
}

.recommend-song {
  margin: 0rpx 30rpx;

  .recommend-song-head {
    display: flex;
    justify-content: left;
    width: 100%;
    align-items: center;
    & > view:nth-child(-n + 2) {
      font-size: 48rpx;
      font-weight: 900;
      color: red;
    }

    & > view:nth-child(2) {
      color: #000000;
      font-size: 42rpx;
      margin-left: 20rpx;
    }
  }
  .recommend-song-list {
    // margin: 0rpx 0rpx;
    white-space: nowrap;
    height: 350rpx;
    margin-top: 20rpx;
    .recommend-song-item {
      position: relative;
      margin: 0 40rpx 0 0;
      border-radius: 30rpx;
      display: inline-block;
      width: 300rpx;
      height: 350rpx;
      .text {
        color: white;
        position: absolute;
        z-index: 9999;
        top: 0;
        right: 10rpx;
        font-weight: 600;
      }
      // background-color: yellow;
      .recommend-song-item-img {
        width: 300rpx;
        height: 250rpx;
        image {
          border-radius: 30rpx;
          width: 100%;
          height: 100%;
        }
      }
      .recommend-song-item-text {
        // display: inline;
        margin-top: 10rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2;
        /** 显示的行数 **/
        overflow: hidden;
        /** 隐藏超出的内容 **/
        word-wrap: break-word;
      }
    }
  }
}

.hot {
  display: flex;
  flex-wrap: wrap;
  margin: 30rpx 30rpx;
  // background-color: yellow;
  .hot-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    & > view:nth-child(-n + 2) {
      font-size: 48rpx;
      font-weight: 900;
      color: red;
    }

    & > view:nth-child(2) {
      color: #000000;
      font-size: 42rpx;
      margin-left: 20rpx;
    }

    & > view:nth-child(3) {
      // border: 1px solid rgb(185, 185, 185);
      padding: 0rpx 10rpx;
      background-color: #ffffff;
      // border-radius: 30rpx;
      margin-left: auto;
      color: #999999;
      font-size: 26rpx;
    }
  }

  .index-list {
    margin-top: 20rpx;
    .index-list-item {
      display: flex;
      margin-bottom: 34rpx;
      .index-list-img {
        position: relative;
        width: 212rpx;
        height: 212rpx;
        border-radius: 30rpx;
        overflow: hidden;
        margin-right: 22rpx;
        image {
          width: 100%;
          height: 100%;
        }

        text {
          position: absolute;
          left: 12rpx;
          bottom: 16rpx;
          color: white;
          font-size: 20rpx;
        }
      }
      .index-list-text {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        line-height: 66rpx;
        font-size: 26rpx;
        view {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          // text-overflow: clip;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
